<template>
    <el-container >
    <el-header style="background-color: rgb(0,0,0)">Header</el-header>
    <el-container >
        <el-aside >
    <div class="el-menu-div">
      <el-col :span="16">
          <el-menu 
    :defalt-active="$route.path" router
    class="el-menu-demo"
    @open="handleOpen"
    @close="handleClse"
    @unique-opened =true
    >
    <el-submenu v-for="(item,key) in navlist" :key="key" :index="item.path">
      <template slot="title">
            <i class="el-icon-share"></i>
            <span >{{item.name}}</span>
        </template >
        <el-menu-item v-for="(itemChildren,x) in item.childrens"  :key="x" :index="itemChildren.path" >{{itemChildren.name}}</el-menu-item>
    </el-submenu>
    </el-menu>
      </el-col>
    </div>
        </el-aside>
        <el-main>
            <div>
            <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="close(tag)">
            {{tag}}
            </el-tag>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </el-main>
            </el-container >
    </el-container>
</template>


<script >
export default {
    data(){
         return {
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: '',
        navlist:[
          {
            name:"首页",
            path:"",
          },
          {
            name:"接口测试",
            path:"",
            childrens:[
              {
                name:"项目管理",
                path:"/Project",
                
                },
              {
                name:"接口管理",
                path:"/Api",
              }
            ]
          },
        {
            name:"任务计划",
            path:"",
          },
          {
            name:"配置",
            path:"",
          }
        ]
      };
    },
    methods:{
        handleOpen(key,keyPath){
            console.log(key,keyPath);
        },
        handleClose(key,keyPath){
            console.log(key,keyPath);
        },
        close(tag){
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        push(){
            if("test"){
                this.dynamicTags.push("test");
            }
            this.inputVisible =false;
            this.inputValue ='';
        }
        
    }
}
</script>
<style>


</style>